<template>
    <view>
        <!-- pages/search/res/index.wxml -->

        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <!-- 搜索 -->
        <view class="search" :style="'position:' + (scrollHeight >= 80 ? 'fixed;top:80px;left:0;right:0;' : 'relative;')">
            <view class="search-input">
                <view class="search-input-img"><image :src="imgUrl + '/imgs/search.png'"></image></view>
                <view class="search-input-input"><input placeholder="请输入关键字" :value="keyword" @confirm="searchKeyword" @input="inputKeyword" /></view>
            </view>
            <view class="search-btn" @tap="searchKeyword">搜索</view>
        </view>

        <!-- 商品列表 -->
        <view>
            <goods :isEnd="goodsEnd" :goodsList="dataList" v-if="dataList.length > 0"></goods>

            <view class="not-res" v-else>
                <!-- 无结果 -->
                <image :src="imgUrl + '/imgs/not_res.png'" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
import goods from '@/components/goods/index';
// pages/search/res/index.js
const Config = require('../../../config/index.js');

const Api = require('../../../api/index.js');

export default {
    components: {
        navber,
        goods
    },
    data() {
        return {
            navbarData: {
                title: '搜索' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            keyword: '',
            //关键字
            pagenow: 1,
            goodsEnd: 'start',
            dataList: [],
            //数据
            scrollHeight: 0,
            business: 4
        };
    },
    onPageScroll: function (h) {
        // 滚动距离
        this.setData({
            scrollHeight: h.scrollTop
        });
    },
    onReachBottom: function (e) {
        //滚动底部
        var page = this.pagenow + 1;
        this.setData({
            pagenow: page
        });
        this.getData();
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (options.keyword) {
            options.keyword = options.keyword;
        } else {
            options.keyword = '';
        }

        this.setData({
            keyword: options.keyword
        });
        this.getData();
        let that = this;
        Api.userCore({
            type: 'core'
        }).then((res) => {
            if (res.code == 1) {
                that.setData({
                    business: res.data.userInfos.business_status
                });
            }
        });
    },
    methods: {
        inputKeyword(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //关键字输入
            this.setData({
                keyword: e.detail.value
            });
        },

        searchKeyword(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //确认搜索
            if (this.keyword == '') {
                uni.showToast({
                    title: '请输入关键字',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            this.setData({
                pagenow: 1,
                dataList: []
            });
            this.getData();
        },

        getData() {
            // api
            var json = {
                keyword: this.keyword,
                pagenow: this.pagenow
            };
            Api.indexGoodsSearch(json).then((res) => {
                if (res.data != undefined) {
                    var data = this.dataList;
                    data = data.concat(res.data); // console.log(data);

                    this.setData({
                        dataList: data
                    });
                } else {
                    this.setData({
                        goodsEnd: 'end'
                    });
                    uni.showToast({
                        title: '暂无数据',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
